<template>
  <div class="Wrapper">
    <!--    首页    -->
    <div class="homeWrapper">
      <span class="homeTitle">首页</span>
    </div>
    <!--  内容  -->
    <div class="homeInfoWrapper">
      <!--  搜索、扫码、钱包、积分  -->
      <div class="homeHeadInfoWrapper">
          <!--  搜索和扫码框  -->
          <div class="selectAndScanWrapper">
            <!--  搜索框  -->
            <div class="selectWrapper">
              <div class="selectImgWrapper">
                <img class="selectImg" src="../../../assets/static/home/select.png" alt=""/>
              </div>
              <div class="selectWordWrapper">
                <span class="select">搜索</span>
              </div>
            </div>
            <!--  扫码按钮  -->
            <div class="scanWrapper">
              <img class="scanImg" src="../../../assets/static/home/scan.png" alt=""/>
            </div>
          </div>
          <!--  钱包和积分  -->
          <div class="pointsAndWalletWrapper">
            <!--  钱包  -->
            <div class="walletWrapper">
              <div class="walletWordWrapper">
                <span class="walletAndPoints">钱包</span>
              </div>
              <!--  图标和数额  -->
              <div class="walletInfoWrapper">
                <!--  图标  -->
                <div class="currencyImgWrapper">
                  <img class="walletAndPointsImg" src="../../../assets/static/home/329.png" alt=""/>
                </div>
                <!--  数额  -->
                <div class="walletNumWrapper">
                  <span class="walletAndPointsAmount">2017.25</span>
                </div>
              </div>
            </div>
            <!--  积分  -->
            <div class="pointsWrapper">
              <div class="pointsWordWrapper">
                <span class="walletAndPoints">积分</span>
              </div>
              <!--  图标和数额  -->
              <div class="pointsInfoWrapper">
                <!--  图标  -->
                <div class="pointsImgWrapper">
                  <img class="walletAndPointsImg" src="../../../assets/static/home/330.png" alt=""/>
                </div>
                <!--  数额  -->
                <div class="pointsNumWrapper">
                  <span class="walletAndPointsAmount">2017</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      <!--  导航和新闻  -->
      <div class="navigationAndNewsWrapper">
          <!--          <img src="../../../assets/static/home/tuoyuan.png" alt=""/>-->
          <!--  shop payment smart kiosk  -->
          <div class="navigationWrapper">
            <!--  shop  -->
            <div class="shopWrapper">
              <div class="shopImgWrapper">
                <img class="shopImg" src="../../../assets/static/home/p2.png" alt=""/>
              </div>
              <div class="shopWordWrapper">
                <span class="navigation">Shop</span>
              </div>
            </div>
            <!--  payment  -->
            <div class="paymentWrapper">
              <div class="paymentImgWrapper">
                <img class="paymentImg" src="../../../assets/static/home/p1.png" alt=""/>
              </div>
              <div class="paymentWordWrapper">
                <span class="navigation">Payment</span>
              </div>
            </div>
            <!--  smart kiosk  -->
            <div class="kioskWrapper">
              <div class="kioskImgWrapper">
                <img class="kioskImg" src="../../../assets/static/home/p3.png" alt=""/>
              </div>
              <div>
                <span class="navigation">Smart kiosk</span>
              </div>
            </div>
          </div>
          <!--  what's new this week  -->
          <div class="newsWrapper">
            <!--            item-->
            <div class="newsInfoWrapper">
              <!--  标题  -->
              <div class="newsTitleWrapper">
                <!--  标题名  -->
                <div class="newsTitleIconAndWordWrapper">
                  <div>
                    <img class="titleImg" src="../../../assets/static/home/y1.png" alt=""/>
                  </div>
                  <span class="weeklyNews">What' new this week</span>
                </div>
                <!--  进入详情 -->
                <div class="forwardImgWrapper">
                  <img class="forwardImg" src="../../../assets/static/home/y2.png" alt=""/>
                </div>
              </div>
              <!--  新闻列表  -->
              <div class="newsListWrapper">
                <div class="aNewsWrapper">
                  <div class="newsImgWrapper">
                    <img class="newsImg" src="../../../assets/static/home/t7.png" alt=""/>
                  </div>
                  <div class="aNewsTitleWrapper">
                    <span class="aNewsTitle">新品上市！</span>
                  </div>
                </div>
                <div class="aNewsWrapper1">
                  <div class="newsImgWrapper1">
                    <img class="newsImg" src="../../../assets/static/home/t6.png" alt=""/>
                  </div>
                  <div class="aNewsTitleWrapper1">
                    <span class="aNewsTitle">新品上市！</span>
                  </div>
                </div>
                <div class="aNewsWrapper2">
                  <div class="newsImgWrapper2">
                    <img class="newsImg" src="../../../assets/static/home/t6.png" alt=""/>
                  </div>
                  <div class="aNewsTitleWrapper2">
                    <span class="aNewsTitle">新品上市！</span>
                  </div>
                </div>
              </div>
            </div>
            <!--            item-->
            <div class="newsInfoWrapper1">
              <!--  标题  -->
              <div class="newsTitleWrapper">
                <!--  标题名  -->
                <div class="newsTitleIconAndWordWrapper">
                  <div>
                    <img class="titleImg" src="../../../assets/static/home/y1.png" alt=""/>
                  </div>
                  <span class="weeklyNews">What' new this week</span>
                </div>
                <!--  进入详情 -->
                <div class="forwardImgWrapper">
                  <img class="forwardImg" src="../../../assets/static/home/y2.png" alt=""/>
                </div>
              </div>
              <!--  新闻列表  -->
              <div class="newsListWrapper">
                <div class="aNewsWrapper">
                  <div class="newsImgWrapper">
                    <img class="newsImg" src="../../../assets/static/home/t7.png" alt=""/>
                  </div>
                  <div class="aNewsTitleWrapper">
                    <span class="aNewsTitle">新品上市！</span>
                  </div>
                </div>
                <div class="aNewsWrapper1">
                  <div class="newsImgWrapper1">
                    <img class="newsImg" src="../../../assets/static/home/t6.png" alt=""/>
                  </div>
                  <div class="aNewsTitleWrapper1">
                    <span class="aNewsTitle">新品上市！</span>
                  </div>
                </div>
                <div class="aNewsWrapper2">
                  <div class="newsImgWrapper2">
                    <img class="newsImg" src="../../../assets/static/home/t6.png" alt=""/>
                  </div>
                  <div class="aNewsTitleWrapper2">
                    <span class="aNewsTitle">新品上市！</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
      <!--  底部  -->
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
/*-------------- div居中 -----------------*/
.Wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.homeWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.homeInfoWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.homeHeadInfoWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.selectAndScanWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.selectWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.selectImgWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.selectWordWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.scanWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.pointsAndWalletWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.walletWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.walletWordWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.walletInfoWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.currencyImgWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.walletNumWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.pointsWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.pointsWordWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.pointsInfoWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.pointsImgWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.pointsNumWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.navigationAndNewsWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.navigationWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.shopWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.shopImgWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.shopWordWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.paymentWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.paymentImgWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.paymentWordWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.kioskWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.kioskImgWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.newsWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.newsInfoWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.newsTitleWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.newsTitleIconAndWordWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.forwardImgWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.newsListWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.aNewsWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.newsImgWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.aNewsTitleWrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.aNewsWrapper1{
  display: flex;
  align-items: center;
  justify-content: center;
}
.newsImgWrapper1{
  display: flex;
  align-items: center;
  justify-content: center;
}
.aNewsTitleWrapper1{
  display: flex;
  align-items: center;
  justify-content: center;
}
.aNewsWrapper2{
  display: flex;
  align-items: center;
  justify-content: center;
}
.newsImgWrapper2{
  display: flex;
  align-items: center;
  justify-content: center;
}
.aNewsTitleWrapper2{
  display: flex;
  align-items: center;
  justify-content: center;
}
.newsInfoWrapper1{
  display: flex;
  align-items: center;
  justify-content: center;
}
/*-------------- span字体 -----------------*/
.homeTitle{
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
}
.select{
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #67C41D;
}
.walletAndPoints{
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}
.walletAndPointsAmount{
  font-size: 43px;
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  color: #333333;
}
.navigation{
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 44px;
}
.weeklyNews{
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #000000;
  line-height: 44px;
}
.aNewsTitle{
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 44px;
}
/*-------------- img图片 -----------------*/
.selectImg{
  width: 24px;
  height: 22px;
}
.scanImg{
  width: 26px;
  height: 26px;
}
.walletAndPointsImg{
  width: 43px;
  height: 42px;
}
.shopImg{
  width: 132px;
  height: 134px;
}
.paymentImg{
  width: 95px;
  height: 160px;
}
.kioskImg{
  width: 100px;
  height: 150px;
}
.titleImg{
  width: 6px;
  height: 26px;
}
.forwardImg{
  width: 25px;
  height: 18px;
}
.newsImg{
  width: 280px;
  height: 240px;
}
</style>
